<template>
  <!-- 资源列表 -->
  <!-- 表格 -->
  <el-table :data="list" border size="small" table-layout="auto">
    <el-table-column label="编号" prop="id" align="center" />
    <el-table-column label="资源名称" prop="name" align="center" />
    <el-table-column label="资源路径" prop="url" align="center" />
    <el-table-column label="描述" prop="description" align="center" />
    <el-table-column label="添加时间" align="center" min-width="100">
      <template #default="scope">
        {{ newDate(scope.row.createTime) }}
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-pagination
    background
    v-model:current-page="pageNum"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { resource, admin } from '@/request/api'
import { useTable } from '@/hooks/component/useTable'

// 对一些组件公用的属性和方法进行封装
// 当前页详细数据、当前第几页、一页多少条数据、数据总数、搜索框
const { list, pageNum, pageSize, total, newDate, handleSizeChange, handleCurrentChange, updateStatus } = useTable(resource.APIResourceList)
</script>

<style lang="less" scoped>
// 分页器
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
